@import "libary.less";

@font-face {
 font-family: "UVNNguyenDu";
 src: url("../fonts/UVNNguyenDu.TTF");
}

@charset "utf-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
	outline: 0 none;
}

img{
	border: 0;
}

a{
	color: #6DAD03;
	text-decoration: underline;
}

a:hover{
	text-decoration: none;
}

ul{ list-style: none; }

html, body{
	margin: 0px;
	padding: 0px;
	font-family: Arial;
	font-size: 12px;
	color: #818181;
	background: url("../images/bg.gif") repeat-x scroll 0 0 #FEDC00;
}

.clearAll{ clear: both; font-size: 0px; width: 0px; height: 0px; }
.center{ text-align: center; }

.button{
	.float;
	background: url("../images/button.gif") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
	padding: 0 8px 2px 8px;
	.radius(2px);
	color: @white;
	font-family: "UVNNguyenDu";
	font-size: 16px;
	text-transform: uppercase;
	cursor: pointer;
	
	a{
		color: @white;
		text-decoration: none;
	}
}

.button:hover{
	background-position: 0 -25px;
}

.price{
	color: @cam;
	font-family: "UVNNguyenDu";
	font-size: 16px;
	font-weight: 100 !important;
}

.price_sellers{
	.float;
	width: 100%;
	
	strike{
		color: @cam;
		font-family: Arial;
		font-size: 13px;
		font-weight: 100 !important;
		.float;
		margin-top: 8px;
	}
	
	h4{
		float: right;
		display: inline;
		color: #8f37ea;
	}
}



.w49{
	.float;
	width: 49%;
}

input.error{
	border: 1px solid @red !important;
}

span.error{
	color: @red;
	.float;
	margin: 8px 0 0 10px;
}

.left{
	float: left;
	display: inline;
}

.right{
	float: right;
	display: inline;
}

.tbao{
	.float;
	border: 1px solid #6dad03;
	padding: 10px 20px;
	width: 875px;
	margin-top: 20px;
	color: #fb7600;
}

.pagination{
	width: 100%;
	.float;
	text-align: center;
	margin-top: 20px;
	
	.pag_normal{
		padding: 2px 6px;
		cursor: pointer;
		border: 1px solid #D5D5D5;
		font-size: 11px;
		line-height: 14px;
		background: #FAFAFA;
		color: #424242;
		margin-left: 5px;
		height: 19px;
	}

	.pag_normal:hover{
		border: 1px solid #7E8DF8;
		color: #7E8DF8;
	}

	.pag_disabled{
		opacity: 0.35; filter:alpha(opacity=35);
		cursor: default !important;
		color: #424242 !important;
		border: 1px solid #D5D5D5 !important;
	}
}

#wrapper{
	margin: 0 auto;
	width: 960px;
	
	header{
		.float;
		width: 100%;
		margin-top: 35px;
		position: relative;
		
		.logo{
			.float;
		}
		
		.profile{
			float: right;
			display: inline;
			width: 600px;
			
			.lore{
				float: right;
				display: inline;
				width: 100%;
				text-align: right;
				font-size: 14px;
				font-family: "UVNNguyenDu";
				text-transform: uppercase;
				position: relative;
				color: @white;
				
				a{
					color: @white;
					text-decoration: none;
				}
				
				a:hover{
					color: @blue;
				}
				
				figcaption{
					position: relative;
					cursor: pointer;
					
					ul{
						position: absolute;
						top: 20px;
						right: 0;
						padding: 0 10px;
						background-color: #ffffff;
						width: 150px;
						display: none;
						
						li{
							.float;
							width: 100%;
							padding: 8px 0;
							font-family: Arial !important;
							font-size: 12px;
							text-transform: none;
							text-align: left;
							
							a{
								color: #818181 !important;
							}
							
							a:hover{
								color: #6dad03 !important;
								text-decoration: underline;
							}
						}
					}
				}
				
				&:hover ul{
					display: block;
				}
			}
			
			img{
				float: right;
				display: inline;
				margin: -5px -26px 0 0;
				
			}
		}
		
		.phone_header{
			float: right;
			display: inline;
			width: 600px;
			text-align: right;
			color: @white;
			font-size: 46px;
			font-weight: bold;
			margin-top: 20px;
			
			span{
				color: @blue;
			}
		}
		
		.search{
			float:  right;
			display: inline;
			margin-top: 10px;
			background: url("../images/bg_search.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
			width: 237px;
			height: 48px;
			padding: 9px 10px 0 14px;
			
			
			input[type="text"]{
				.float;
				background: url("../images/bg_inp_search.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
				height: 31px;
				width: 159px;
				color: #7584FB;
				border: 0;
				font-size: 11px;
				padding: 0 10px 0 30px;
				margin-top: 5px;
			}
			
			input[type="submit"]{
				.float;
				background: url("../images/btn_search.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
				border: 0;
				cursor: pointer;
				width: 38px;
				height: 38px;
				margin-top: 2px;
			}
		}
		
		.cart_home{
			position: absolute;
			bottom: 0;
			right: 263px;
			background: url("../images/top_cart.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
			height: 89px;
			width: 94px;
			color: @white;
			font-size: 30px;
			font-weight: bold;
			
			a{
				text-decoration: none;
				color: @white;			
			}
			
			span{
				.float;
				line-height: 130px;
				text-align: center;
				width: 100%;
				
				a:hover{
					color: #8f37ea;
				}
			}
		}
	}
	
	nav{
		.float;
		width: 100%;
		background: url(../images/bg_nav.gif) no-repeat;
		
		ul{
			.float;
			width: 100%;			
			height: 55px;
			font-family: UVNNguyenDu;
			
			li{
				.float;
				text-transform: uppercase;
				background: url("../images/nav_sp.gif") no-repeat scroll 100% 0 rgba(0, 0, 0, 0);
				position: relative;
				
				ul{
					position: absolute;
					top: 55px;
					left: 0px;
					background-color: #D72D10;
					padding: 0 10px 10px;
					display: none;
					width: 200px;
					height: auto;
					
					
					li{
						background: none;
						width: 100%;
						border-bottom: 1px dotted #fa9635;
						
						a{
							font-size: 12px !important;
							padding: 5px !important;
						}
					}
				}
				
				a{
					display: block;
					color: @white;
					text-decoration: none;
					padding: 16px 22px 17px 20px;
					font-size: 16px;
				}
				
				a:hover,a.active{
					color: #fed700;
				}	
				
				&:hover ul{
					display: block;
				}			
			}		
		}
	}
	
	.barner{
		.float;
		width: 100%;
		
		.barner_left{
			.float;
		}
		
		a{
			display: block;
		}
	}
	
	.content{
		.float;
		width: 920px;
		background-color: @white;
		padding: 30px 20px 35px;
		.radius_size(0,0,13px,13px);
		
		.login_success{
			.float;
			width: 100%;
			margin-top: 20px
		}
		
		h1{
			.float;
			font-family: "UVNNguyenDu";
			font-size: 30px;
			text-transform: uppercase;
			color: @blue;
			width: 100%;
		}
		
		.frm_login{
			.float;
			width: 100%;
			font-size: 13px;
			
			.w49{
				h4{
					.float;
					width: 100%;
					font-size: 18px;
					font-weight: normal;
					padding-bottom: 15px;
					margin-top: 20px;
				}
				
				p{
					.float;
					width: 96%;
					text-align: justify;
				}
				
				article{
					.float;
					width: 100%;
					margin-top: 15px;
					
					label{
						.float;
						width: 100%;
						padding-bottom: 5px;
						
						span{
							color: @red;
						}
					}
					
					input{
						.float;
						padding: 5px;
						width: 265px;
						.border(1px,#dddddd);
					}
					
					input[type="radio"]{
						width: 20px !important;
						margin-top: 2px;
					}
				}
			
				strong{
					.float;
					width: 100%;
					font-size: 11px; 
					color: @red;
					margin-top: 10px;
					visibility: hidden;
					height: 13px;
				}
				
				.log{
					.float;
					width: 100%;
					margin-top: 5px;
					
					a{
						.float;
						margin-top: 4px;
					}			
				}
				
				dir{
					float: right;
					display: inline;
				}
			}
			
			.w90{
				.float;
				width: 875px;
				.border(1px,#dddddd);
				padding: 20px;
				position: relative;
				margin-top: 40px;
				
				h4{
					position: absolute;
					background-color: #dedede;
					color: #000000;
					top: -15px;
					left: 30px;
					padding: 5px;
				}
				
				.register{
					.float;
					width: 100%;
					
					.full{
						width: 100%;;
					}
					
					.w270{
						width: 270px;
						margin-right: 10px;
					}
					.one_register{
						.float;
						margin-top: 10px;
						
						
						label{
							.float;
							width: 100%;
							
							span{
								color: @red;
							}
						}
						
						input{
							.float;
							width: 255px;
							padding: 5px;
							.border(1px,#dddddd);
							margin-top: 5px;
						}
						
						textarea{
							.float;
							width: 255px;
							padding: 5px;
							.border(1px,#dddddd);
							margin-top: 5px;
						}
						
						textarea.error{
							.border(1px,#d0031e) !important;
						}
						
						img{
							.float;
							margin: 10px 10px 0 0;
						}
					}
				}
			}
			
			dir.regis_bt{
				float: right;
				margin-top: 30px;
				border: 0;
			}
			
			ul{
				.float;
				width: 100%;
				margin-top: 20px;
				border: solid #dddddd;
				border-width: 1px 1px 0 1px;
				
				li{
					.float;
					width: 100%;
					
					.step_title{
						.float;
						width: 100%;
						padding: 10px 0;
						border-bottom: 1px solid #dddddd;
						
						span{
							.float;
							margin: 0 10px 0 20px;
							.border(1px,#dddddd);
							padding: 2px 8px;
						}
						
						p{
							.float;
							margin-top: 3px;
							font-weight: bold;
						}
					}
					
					.checkout_info{
						.float;
						padding: 0 20px;
						width: 95.7%;
						
						table{
							.float;
							margin-top: 10px;
						}
						
						h2{
							.float;
							color: #7E8DF8;
							width: 100%;
							margin-top: 10px;
						}
					}
					
					#show_step4{
						p{
							.float;
							line-height: 24px;
							margin-top: 10px;
							width: 100%;
							
							b{
								color: #FB7600;
							}
						}
					}
				}
				
				li.active{
					.step_title {					
						span{
							border: 1px solid #D80520;
							background-color: #D80520;
							color: #ffffff;
						}
						
						p{
							color: #D80520;
						}
					}
					
					
				}
			}
		}
		
		.products{
			.float;
			width: 100%;
			
			.one_products{
				.float;
				.border(1px,#dddddd);
				padding: 10px;
				.radius(5px);
				margin: 20px 20px 0 0;
				position: relative;
				width: 193px;
				
				img{
					width: 193px;
					height: 193px;
				}
				
				p{
					width: 100%;
					margin-top: 10px;
				}
				
				h4{
					margin-top: 5px;
				}
				
				.sale{
					position: absolute;
					top: 0;
					right: 0;
					background: url(../images/sale.png) no-repeat;
					width: 73px;
					height: 71px;
				}
			}
		}
		
		.content_left{
			.float;
			width: 685px;
			
			.content_left_title{
				.float;
				margin: 10px 0 15px;
				width: 100%;
			}
			
			.detail{
				.float;
				width: 100%;
				margin-top: 20px;
				
				img{
					.float;
					width: 265px;
					height: 265px;
					border: 1px solid #dddddd;
					padding: 5px;
				}
				
				.detail_content{
					.float;
					width: 370px;
					margin-left: 30px;
					
					h4{
						.float;
						width: 100%;
						color: @blue;
						font-size: 18px;
						text-transform: uppercase;
						font-family: "UVNNguyenDu";
					}
					
					p{
						.float;
						width: 100%;
						text-align: justify;
						margin: 10px 0;
					}
					
					div{
						.float;
						width: 100%;
						margin-top: 10px;
						
						span{
							.float;
							margin: 5px 5px 0 0;
						}
						
						input{
							.float;
							width: 20px;
							padding: 4px;
							text-align: center;
							border: 1px solid #dddddd;
							margin-right: 10px;
						}
					}
				}
			}
			
			#event{
				.float;
				width: 100%;
				
				.event_title{
					.float;
					width: 100%;
					margin-top: 20px;
					cursor: pointer;
					
					img{
						.float;
						width: 16px;
						height: 16px;
					}
					
					p{
						.float;
						margin: 1px 0 0 10px;
						color: @cam;
						font-weight: bold;
					}
				}
				
				.event_content{
					.float;
					width: 100%;
					margin-top: 10px;
					
					img{
						.float;
						width: 120px;
						height: 120px;
						margin-right: 20px;
					}
					
					article{
						.float;
						text-align: justify;
						width: 540px;
						
						p{
							.float;
							width: 100%;
						}
						
						span{
							float: right;
							display: inline;
							font-size: 11px;
							cursor: pointer;
							margin-top: 5px;
							
							a{
								color: @cam;
								text-decoration: none;
							}
							
							a:hover{
								text-decoration: underline;
							}
						}
						
						div{
							float: left;
							display: none;
							width: 100%;
							margin-top: 10px;
						}
					}
				}
			}
			
			.content_contact{
				.float;
				width: 100%;
				margin-top: 20px;
				
				h4{
					.float;
					width: 100%;
					font-size: 14px;
					color: @cam;
				}
				
				p{
					.float;
					width: 100%;
					text-align: justify;
					margin-top: 5px;
				}
				
				.map{
					.float;
					width: 100%;
					margin-top: 20px;
					
					iframe{
						.float;
						width: 425px;
						.border(1px,#999999);
					}
					
					.address{
						.float;
						width: 248px;
						margin-left: 10px;
						
						h4{
							.float;
							width: 100%;
							font-size: 12px;
							color: @cam;
						}
						
						span{
							.float;
							width: 100%;
							margin-top: 5px;
						}
					}
				}
			}
		}
		
		.content_right{
			.float;
			width: 215px;
			margin: 63px 0 0 20px;
			
			.block{
				.float;
				width: 100%;
				margin-bottom: 30px;
				
				.block_title{
					.float;
					width: 195px;
					background-color: #D80520;
					.radius_size(10px,10px,0,0);
					color: @white;
					font-family: "UVNNguyenDu";
					text-transform: uppercase;
					font-weight: bold;
					padding: 7px 0 8px 20px;
					font-size: 16px;
				}
				
				.block_content{
					.float;
					border: 1px solid #dddddd;
					width: 193px;
					.radius_size(0,0,10px,10px);
					padding: 15px 10px;
					
					ul.block_cart{
						.float;
						width: 100%;
						
						li{
							.float;
							width: 100%;
							margin-top: 5px;
							
							img{
								float: right;
								display: inline;
								margin-top: 3px;
								cursor: pointer;
							}
							
							span{
								.float;
								width: 30px;
							}
							
							a{
								.float;
								width: 75px;
							}
							
							b{
								.float;
								font-size: 11px;
								margin-top: 1px;
								width: 71px;
								text-align: right;
							}
								
						}
					}
					
					h4{
						.float;
						width: 100%;
						margin-top: 15px;
						
						span{
							margin-left: 39px;
							font-size: 13px;
						}
					}
					
					h3{
						.float;
						width: 100%;
						margin-top: 5px;
						font-size: 12px;
					}
					
					ul.block_category{
						.float;
						width: 100%;
						margin-top: -14px;
						
						li{
							.float;
							width: 100%;
							border-bottom: 1px solid #bbbbbb;
							
							a{
								color: #818181;
								text-decoration: none !important;
								padding: 5px 0;
								display: block;
							}
						}
					}
					
					.chat{
						.float;
						margin-left: 25px;
					}
					
					ul#scroller{
						img{
							width: 194px;
							height: 220px;
						}
					}
				}
			}
		}
		
		table{
			width: 100%;
			float: left;
			display: inline;
			margin-top: 10px;
			
			tr{
				width: 100%;
				
				th{
					border: solid #dddddd;
					border-width: 1px 1px 0 0;
					padding: 8px 10px;
				}
				
				th:first-child{
					border-left: 1px solid #dddddd;
				}
				
				td{
					border: solid #dddddd;
					border-width: 1px 1px 0 0;
					padding: 15px;		
				}
				
				td.cart_num{
					input{
						.float;
						width: 15px;
						height: 15px;
						border: 1px solid #dddddd;
						padding: 5px;
						text-align: center;
					}
					
					img{
						.float;
						margin: 5px 0 0 5px;
						cursor: pointer;
					}
				}
				
				td:first-child{
					border-left: 1px solid #dddddd;
				}
			}
			
			tr:last-child td{
				border-bottom: 1px solid #dddddd;
			}
		}
		
		.checkout{
			padding: 5px 10px;
			font-size: 19px;
			background-color: #D1031E;
			font-weight: bold;
			text-transform: uppercase;
			margin-top: 20px;
			
			a{
				color: #ffffff;
				text-decoration: none;
			}
		}
	}
	
	footer{
		.float;
		width: 100%;
		margin: 20px 0;
		
		p{
			.float;
			width: 100%;
			color: @red;
			
			a{
				color: @red;
			}
		}
	}
}








